<template>
  <!-- 具体配置 -->
  <div class="specific-view">
    <topBarButVue :isshowadd="topbarstau.add" :isshowsee="topbarstau.add" @getstau="getstau" />
    <div class="view-main">
      <leftStepBarVue @getstep="getstep" @getnavindex="getnavindex" />
      <div class="right-box">
        <div class="right-box-main">
          <configBgVue v-if="navindex === -2" :select-stau="selectStau" :navindex="navindex" />
          <topBottomConfigVue v-if="navindex >= -1" :select-stau="selectStau" :navindex="navindex" />
          <!-- {{ selectStau }} -->
        </div>
      </div>
    </div>
    <DatavDialog
      :show.sync="showdatavDialog"
      @close="close"
    />
  </div>
</template>
<script>
import leftStepBarVue from '../components/left-step-bar.vue'
import topBarButVue from '../components/top-bar-but.vue'
import topBottomConfigVue from '../components/top-bottom-config.vue'
import configBgVue from '../components/config-bg.vue'
import DatavDialog from './components/datav-dialog.vue'
export default {
  components: { leftStepBarVue, topBarButVue, topBottomConfigVue, configBgVue, DatavDialog },
  data() {
    return {
      topbarstau: {
        add: true,
        see: true
      },
      stepid: 1,
      selectStau: '',
      navindex: -1,
      showdatavDialog: false
    }
  },
  mounted() {
  },
  methods: {
    getnavindex(e) {
      this.navindex = e
    },
    getstau(e) {
      this.selectStau = e
      if (this.selectStau === 'see') {
        this.showdatavDialog = true
      }
    },
    close() {
      this.showdatavDialog = false
    },
    getstep(i) {
      this.stepid = i
    }
  }
}
</script>
<style lang="scss" scoped>
.specific-view{
  width: 100%;
  height: 100%;
  overflow: hidden;
  .view-main{
    width: 100%;
    height:  calc(100% - 52px);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    flex-wrap: nowrap;
    .right-box{
      width: calc(100% - 200px);
      height: 100%;
      background-image: url(../../../assets/screenManage/screenBack.png);
      background-size: 100% 100%;
      position: relative;
      .right-box-main{
        position: absolute;
        top: 6.4%;
        left: 3.5%;
        width: 93.5%;
        height: 89%;
        background-color:#00171c;
      }
    }
  }
}
</style>
